<template>
  <div
    class="bre-margin-bottom bre-padding-default bre-content-bg bre-box-shadow-default"
  >
    <article>
      <div>
        <h5>
          创建:{{ articleFrom.createdAt }} | 更新:{{ articleFrom.updatedAt }}
        </h5>
      </div>
      <br />
      <div
        class="markdown-body"
        v-html="articleFrom.content"
        id="markdown-body"
        @click="clickEvent"
      ></div>
      <br />
      <div>
        <a-tag
          v-for="tagGroupitem in articleFrom.tagGroup"
          :key="tagGroupitem"
          v-text="tagGroupitem"
        ></a-tag>
      </div>
      <br />
      <a-row type="flex">
        <a-col>
          <a-tooltip placement="topLeft" title="正在开发">
            <a-button> 点赞<LikeOutlined /> </a-button>
          </a-tooltip>
        </a-col>
        <a-col>
          <a-button @click="createqrcode()"> 分享 <LinkOutlined /> </a-button>
        </a-col>
        <!-- <a-col :span="3" > <a-button type="primary"> 评论 <MessageOutlined /> /> </a-button> </a-col> -->
      </a-row>
      <!-- 二维码 -->
      <br />
      <div id="qrcode-location">
        <div id="qrcode"></div>
      </div>
      <a-image-preview-group>
        <a-image
          v-for="item in articleFrom.ImgGroup"
          :key="item"
          :width="0"
          :src="item"
        />
      </a-image-preview-group>
      <br />
    </article>
    <Comment></Comment>
  </div>
</template>

<script>
import { GetAccurateFind } from "@indexCore/api/article";
import { injectionEvent } from "@/utils/editMarkdown";
import {
  //  CommentOutlined ,
  LikeOutlined,
  LinkOutlined,
} from "@ant-design/icons-vue";
// import { Modal } from 'ant-design-vue';
import { useStore } from "vuex";
import { useRouter } from "vue-router";

import "@/adminCore/views/article/markdwon-it-css.js";
import {
  reactive,
  onUpdated,
  // ref
} from "vue";
import QRCode from "qrcodejs2";
import Comment from "@/indexCore/views/article/comment";
import copyData from "@/utils/copyData";
import { Timeago } from "@/utils/time"; //文章列表
export default {
  // components: { mavonEditor },
  data() {
    return {
      testData: {},
    };
  },
  beforeCreate() {
    // document.querySelector('head').appendChild(oMeta);
    //  this.$store.commit("HomeNav",{shape:1});
  },
  components: {
    LikeOutlined,
    LinkOutlined,
    Comment,
    // QRCode,
  },
  methods: {},
  setup() {
    const $router = useRouter();
    const $store = useStore();
    $store.commit("setHomeNav", { status: 1 });
    const articleFrom = reactive({
      content: "正在加载...",
      createdAt: "",
      updatedAt: "",
      tagGroup: [],
      // dom渲染后
      ImgGroup: [],
      title: "",
      shareLink: window.location.href,
    });

    function clickEvent(event, reset = "reset") {
      injectionEvent(event, reset);
      if (event.target.tagName == "IMG") {
        document.querySelectorAll(".ant-image-img")[event.target.getAttribute("index")].click();
        setTimeout(() => {
          document.body.style = "";
        });
      } else if (
        event.target.tagName == "A" &&
        event.target.getAttribute("url") != null
      ) {
        let url = event.target.getAttribute("url");

        $router.push({ path: url });

        // $router.push({name:"refresh" })
      }
    }

    //     if(location.href.indexOf('//y.qq.com')!=-1){
    // document.write("<script>document.domain = 'qq.com';<\/script>");
    // }else {
    // document.write("<script>document.domain = 'qqmusic.com';<\/script>");
    // }
    function show(id) {
      GetAccurateFind({ guid: id })
        .then(({ data, code }) => {
          let a = articleFrom;
          if (code == 1000) {
            a.content = data.html;
            a.createdAt = Timeago(data.createdAt);
            a.updatedAt = Timeago(data.updatedAt);
            a.tagGroup = data.tagGroup;
            a.title = data.title;
            document.title = data.title + "-" + document.title;

            // let oMeta2=document.createElement('meta')
            //   document.querySelector("head").appendChild(oMeta2)
          } else {
            a.content.value = "暂无数据";
          }
        })
        .then(() => {
          setTimeout(getDomImgSrc(), 100);
        });
    }
    show($router.currentRoute.value.params.id);
    function getDomImgSrc() {
      let DomImg = document.querySelector("#markdown-body");
      DomImg.querySelectorAll("img").forEach((imgV, i) => {
        // imgV=
        // document.body.replaceChild(document.querySelector(".xxx"), imgV);
        // console.log(imgV)
        // v=document.querySelector(".xxx")
        imgV.setAttribute("index", i);
        articleFrom.ImgGroup.push(imgV.src);
      });
      DomImg.querySelectorAll(`a[href^="http"]`).forEach((AclickV) => {
        AclickV.target = "_blank";

        let href = new URL(AclickV.href);
        // console.log(window.location.hostname,href.hostname)
        if (window.location.hostname == href.hostname) {
          AclickV.target = "";
          AclickV.setAttribute("url", href.pathname);
          AclickV.href = "javascript:;";
        }
        //  if  window.location.host
        //  AclickV.
      });

      //  articleFrom.ImgGroup=[...new Set(articleFrom.ImgGroup)]// 去重
    }

    //点赞功能
    function like() {}
    function InjectionAntImage() {
      console.log();
    }
    function createqrcode() {
      let codeDom = document.querySelector("#qrcode");
      if (codeDom.innerHTML == "") {
        new QRCode("qrcode", {
          width: 124,
          height: 124, // 高度
          text: window.location.href || `http://www.breakon.top/`, // 二维码内容
          render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          colorDark: "#2b3c68",
          colorLight: "#ffffff",
          // background: "", // 背景色
          // foreground: "#2b3c60", // 前景色
        });
      } else {
        codeDom.style.display =
          codeDom.style.display == "none" ? "block" : "none";
      }
      copyData("滋溜鹿博客:" + window.location.href);
    }
    let temp = $router.currentRoute.value.params.id;
    onUpdated(() => {
      if (temp != $router.currentRoute.value.params.id) {
        temp = $router.currentRoute.value.params.id;
        show(temp);
        // 路由发生变化就更新
      }
    });

    return {
      articleFrom,
      // onMounted,
      // 点赞功能
      like,
      InjectionAntImage,
      createqrcode,
      clickEvent,
      onUpdated,
    };
  },
};
</script>

<style>
body {
  /* overflow:hidden; */
}
/* #markdown-body {
 } */
#qrcode {
  width: 124px;
  margin: auto;
}
#qrcode-location {
  text-align: center;
}
#markdown-body > .v-note-wrapper .v-note-panel .v-note-show .v-show-content,
.v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  padding: 0px;
  background: none;
}
#markdown-body > .v-note-wrapper .v-note-panel {
  border: 0px;
}
</style>

